<!--
  设置值班
  User: YanZengBao
  Date: 2020-02-19
-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<!-- BEGIN FORM-->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-red-sunglo bold uppercase">设置值班</span>
            <span class="caption-helper">设置值班</span>
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal" id="save-module">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-8">

                        <div class="portlet-title">
                            <div class="caption">
                                <i class="icon-speech font-blue-hoki"></i>
                                <span class="caption-subject font-blue-hoki" style="font-size: 18px;">值班安排</span>
                            </div>
                        </div>

                        <div class="portlet-body table-responsive">
                            <div>
                                <table class="table table-bordered table-hover" id="dict-table">
                                    <thead>
                                    <tr>
                                        <th style="width: 12%;">周次</th>
                                        <th style="width: 12%;">时间</th>
                                        <th>值班人</th>
                                        <th style="width: 10%;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周一</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="moas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="1" th:data-time-interval="1" th:data-id="moa" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="mops"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="1" th:data-time-interval="2" th:data-id="mop" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="mons"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="1" th:data-time-interval="3" th:data-id="mon" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周二</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="tuas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="2" th:data-time-interval="1" th:data-id="tua" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="tups"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="2" th:data-time-interval="2" th:data-id="tup" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="tuns"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="2" th:data-time-interval="3" th:data-id="tun" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周三</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="weas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="3" th:data-time-interval="1" th:data-id="wea" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="weps"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="3" th:data-time-interval="2" th:data-id="wep" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="wens"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="3" th:data-time-interval="3" th:data-id="wen" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周四</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="thas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="4" th:data-time-interval="1" th:data-id="tha" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="thps"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="4" th:data-time-interval="2" th:data-id="thp" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="thns"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="4" th:data-time-interval="3" th:data-id="thn" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周五</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="fras"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="5" th:data-time-interval="1" th:data-id="fra" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="frps"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="5" th:data-time-interval="2" th:data-id="frp" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="frns"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="5" th:data-time-interval="3" th:data-id="frn" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周六</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="saas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="6" th:data-time-interval="1" th:data-id="saa" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="saps"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="6" th:data-time-interval="2" th:data-id="sap" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="sans"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="6" th:data-time-interval="3" th:data-id="san" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td rowspan="4" style="text-align: center;vertical-align: inherit;border-right: #e6e6e6 solid 1px;">周日</td>
                                    </tr>
                                    <tr>
                                        <td>上午</td>
                                        <td id="suas"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="7" th:data-time-interval="1" th:data-id="sua" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>下午</td>
                                        <td id="sups"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="7" th:data-time-interval="2" th:data-id="sup" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>晚上</td>
                                        <td id="suns"></td>
                                        <td>
                                            <div class="btn-group-xs">
                                                <button th:data-week="7" th:data-time-interval="3" th:data-id="sun" type="button" class="btn purple" onclick="saveApprovalSetting(this);">添加</button>
                                            </div>
                                        </td>
                                    </tr>

                                    <input th:value="${roadId}" type="hidden" id="roadId"/>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">

                        <div class="portlet-title">
                            <div class="caption">
                                <i class="icon-speech font-blue-hoki"></i>
                                <span class="caption-subject font-blue-hoki" style="font-size: 18px;">值班人</span>
                            </div>
                        </div>
                        <div class="portlet-body table-responsive">
                            <div>
                                <table class="table table-bordered table-hover" id="account-table">
                                    <thead>
                                    <tr>
                                        <th style="width: 12%;">选择</th>
                                        <th>值班人</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="data,iterStar:${accountInfos}">
                                        <td class="center">
                                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                <input type="checkbox" class="checkbox-child" title="选择此条数据"
                                                       th:data-name="${data['name']}"
                                                       th:value="${data['id']}"><span></span>
                                            </label>
                                        </td>
                                        <td th:title="${data['name']}"
                                            th:text="${#strings.abbreviate(data['name'],32)}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>

<script>

    $(function () {
        //初始化页面
        initPage();
        //初始化页面
        initAddChoose();
        initDuty();
    });

    function initDuty(){
        let roadId = $("#roadId").val();

        tools.post("/road/getDuty", {"roadId":roadId}, function (data) {
            if(data.success){

                var arr = [];
                for(var item in data.data){
                    arr.push(data.data[item]);
                }
                    for (var i = 0; i < arr.length; i++) {

                        let map = new Map();
                        map.set("accountInfoId",arr[i].accountInfoId);
                        map.set("week", arr[i].week);
                        map.set("timeInterval", arr[i].timeInterval);
                        //所有值班信息
                        let dutyArray = new Array();
                        dutyArray.push(map);

                        //周一
                        if (arr[i].week == 1 && arr[i].timeInterval == 1){
                            document.getElementById('moas').innerHTML="<span id= moa class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 1 && arr[i].timeInterval == 2){
                            document.getElementById('mops').innerHTML="<span id= mop class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 1 && arr[i].timeInterval == 3){
                            document.getElementById('mons').innerHTML="<span id= mon class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        //周二
                        if (arr[i].week == 2 && arr[i].timeInterval == 1){
                            document.getElementById('tuas').innerHTML="<span id= tua class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 2 && arr[i].timeInterval == 2){
                            document.getElementById('tups').innerHTML="<span id= tup class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 2 && arr[i].timeInterval == 3){
                            document.getElementById('tuns').innerHTML="<span id= tun class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                        //周三
                        if (arr[i].week == 3 && arr[i].timeInterval == 1){
                            document.getElementById('weas').innerHTML="<span id= wea class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 3 && arr[i].timeInterval == 2){
                            document.getElementById('weps').innerHTML="<span id= wep class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 3 && arr[i].timeInterval == 3){
                            document.getElementById('wens').innerHTML="<span id= wen class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                        //周四
                        if (arr[i].week == 4 && arr[i].timeInterval == 1){
                            document.getElementById('thas').innerHTML="<span id= tha class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 4 && arr[i].timeInterval == 2){
                            document.getElementById('thps').innerHTML="<span id= thp class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 4 && arr[i].timeInterval == 3){
                            document.getElementById('thns').innerHTML="<span id= thn class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                        //周五
                        if (arr[i].week == 5 && arr[i].timeInterval == 1){
                            document.getElementById('fras').innerHTML="<span id= fra class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 5 && arr[i].timeInterval == 2){
                            document.getElementById('frps').innerHTML="<span id= frp class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 5 && arr[i].timeInterval == 3){
                            document.getElementById('frns').innerHTML="<span id= frn class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                        //周六
                        if (arr[i].week == 6 && arr[i].timeInterval == 1){
                            document.getElementById('saas').innerHTML="<span id= saa class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 6 && arr[i].timeInterval == 2){
                            document.getElementById('saps').innerHTML="<span id= sap class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 6 && arr[i].timeInterval == 3){
                            document.getElementById('sans').innerHTML="<span id= san class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                        //周日
                        if (arr[i].week == 7 && arr[i].timeInterval == 1){
                            document.getElementById('suas').innerHTML="<span id= sua class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 7 && arr[i].timeInterval == 2){
                            document.getElementById('sups').innerHTML="<span id= sup class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }
                        if (arr[i].week == 7 && arr[i].timeInterval == 3){
                            document.getElementById('suns').innerHTML="<span id= sun class=\"font-span\"><a data-id=\"" + arr[i].accountInfoId+ "\" onclick=\"deleteSpan(this)\">" +arr[i].accountInfoName + "</a></span>";
                        }

                    }

            }else{
                tools.errorTip(data);
            }
        });
    }

    function initAddChoose() {
        var table = $('#account-table');
        //全选
        $(".checkbox-all").click(function () {
            var group = $(this);
            table.find(".checkbox-child").each(function () {
                var isCheck = group.is(":checked");
                $(this).prop('checked', isCheck);
                isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
            });
        });

        //选择一行
        $(".checkbox-child").click(function () {
            var isCheck = $(this).is(":checked");
            isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
        });

        //点击每一行空白处 标记 table-notr class 的表格不加载此点击事件
        if (!table.hasClass("table-notr")) {
            table.find("tbody tr").click(function (e) {
                var targetElement = e.target.nodeName;
                //如果是checkbook标签 则不执行以下内容（和自身点击事件冲突）
                if (!(targetElement === "SPAN\nINPUT")) {
                    var checkbox = $(this).find(".checkbox-child").eq(0);
                    var isCheck = checkbox.is(":checked");
                    if (isCheck) {
                        checkbox.prop('checked', false);
                        $(this).removeClass("active");
                    } else {
                        checkbox.prop('checked', true);
                        $(this).addClass("active");
                    }
                }
            });
        }
    }

    /**
     * 向左侧列表添加值班人
     * @param obj
     */
    function saveApprovalSetting(obj) {

        let id = $(obj).data("id");
        let dutyWeek = $(obj).data("week");
        let dutyTimeInterval = $(obj).data("time-interval");
        var _td = $(obj).parent().parent().prev();
        var idAndNames = getIdsAndNames($('#account-table').find(".checkbox-child:checked"));
        if (idAndNames.length > 1) {
            layer.msg("只能选择一个值班人！", {icon: 2, time: 1000});
            return false;
        }
        if (idAndNames.length < 1) {
            layer.msg("请先选择值班人！", {icon: 2, time: 1000});
            return false;
        }
        if (idAndNames.length = 1) {
            if ($("#" + id).length > 0) {
                $("span").remove("#" + id);
            }

            let accountInfoId=idAndNames[0].id;
            let week=dutyWeek;
            let timeInterval=dutyTimeInterval;


            $(_td).append("<span id=" + id + " class=\"font-span\"><a data-id=\"" + idAndNames[0].id + "\" onclick=\"deleteSpan(this)\">" + idAndNames[0].name + "</a></span>");
            save(accountInfoId,week,timeInterval);
        }
    }

    /**
     * 点击值班人时，在数组和页面上同时删除数据
     * @param obj
     */
    function deleteSpan(obj) {
        $(obj).parent().remove();
    }

    function getIdsAndNames(checks) {
        var idsNames = [];
        checks.each(function () {
            var idParam = {};
            idParam.id = $(this).val();
            idParam.name = $(this).data("name");
            idsNames.push(idParam);
        });
        return idsNames;
    }

    /**
     * 值班人数组转为json格式传入后台，进行批量保存
     */
    function save(accountInfoId,week,timeInterval) {

        let roadId = $("#roadId").val();

        tools.post("/road/saveDuty", {"accountInfoId": accountInfoId,"week": week,"timeInterval": timeInterval, "roadId": roadId}, function (data) {
            if (data.success) {
                layer.msg('保存成功', {icon: 1, time: 1000}, function () {

                });
            } else {
                tools.errorTip(data);
            }
        });
    }

    function MapTOJson(duty) {
        let dutyString ="";
        for (var i=0; i<duty.length; i++ ){
            dutyString += ArrTOJson(duty[i]) +",";
        }
        return dutyString;
    }

    function ArrTOJson(arr) {

        let obj = Object.create(null);
        for (let[k,v] of arr){
            obj[k] = v;
        }
        var jsonString = JSON.stringify(obj);
        return jsonString;
    }
</script>
</html>